import { Layout, Menu} from '@arco-design/web-react';
import { IconCalendar, IconCaretRight, IconCaretLeft } from '@arco-design/web-react/icon';
import { useNavigate } from 'react-router';
import { useDispatch, useSelector } from 'react-redux';
import '../../../styles/app.css'
const MenuItem = Menu.Item;
const SubMenu = Menu.SubMenu;
const Sider = Layout.Sider;
function MySider({menuState, setMenuState, ...otherProps}){
    const dispatch = useDispatch()
    const navigate = useNavigate()
    return(
        <Sider
          {...otherProps}
          theme='dark'
          collapsed={menuState.isLeftNavMini}
          onCollapse={()=>{
            setMenuState(()=>{return{
                ...menuState,
                isLeftNavMini: !menuState.isLeftNavMini
            }})
          }}
          collapsible
          trigger={menuState.isLeftNavMini ? <IconCaretRight /> : <IconCaretLeft />}
          breakpoint='xl'
        >
          <div className='logo' />
          <Menu
            theme='dark'
            defaultOpenKeys={[sessionStorage.getItem('menuId')]}
            defaultSelectedKeys={[sessionStorage.getItem('menuId')]}
            onClickMenuItem={(key) =>{
              sessionStorage.setItem('menuId', key)
              SubMenuOnClick(null,()=>{
                navigate(`/${key.split('@')[1]}`)
              })
            }
            }
            style={{ width: '100%' }}
          >
            {renderMenu(menuState.gMenuList, menuState)}
          </Menu>
        </Sider>
    )
}

function renderMenu(menuList, menuState){
    let res = menuList.map(menu=>{
        if (menu.children&&menu.children.length>0){
            return(
                <SubMenu          
                    key={`${menu.id}@${menu.resKey}`}
                    title={
                        <span>
                            <IconCalendar></IconCalendar>
                            {menu.resName}
                        </span>
                    }>
                    {
                        renderMenu(menu.children)
                    }
                </SubMenu>
            )
        }
        return(
            <MenuItem key={`${menu.id}@${menu.resKey}`}>
                {menu.resName}
            </MenuItem>
        )
    })
    return res
}

function SubMenuOnClick(args, fn){
  fn()
}



MySider.defaultProps = {
    sign: 'sider'
}

export default MySider